<template>
	<view class="">
		<div class="tit">
			<p class="p1" :class="acti==true ? 'active':'' " @click="wd">外勤签到</p>
			<p class="p1" :class="acti==false ? 'active':'' " @click="qm">签到列表</p>
		</div>
		<img src="../../static/u20210.png" alt="" class="diimg" />
		<view class="conDi">
			<div class="left">
				<view class="">{{ title }}</view>
				<view class="">{{ address }}</view>
				<view class="">{{ longitude }}</view>
				<view class="">{{ latitude }}</view>
			</div>
			<div class="right">
				<p @click="onClick" class="ppp">纠正位置</p>
			</div>
		</view>
		<atl-map :disable="disable" v-if="show" :longitude="longitude" :latitude="latitude" :marker="marker"
			:mapKey="mapKey" :mapType="mapType" @confirm="confirm">
			<template v-slot:content>
				<view style="position: absolute; bottom: 0; width: 100%; height: 24px; background-color: white">
					<view style="display: flex; align-items: center; justify-content: center">
						<image style="width: 24px; height: 24px" :src="imageSrc"></image>
						<text>内容插槽</text>
					</view>
				</view>
			</template>
		</atl-map>
		<u-cell-group>
			<u-cell size="large" title="关联客户" value="深圳木卫二科技有限公司" isLink url="/pages/message/crunch/xrze/xrze"></u-cell>
			<u-cell size="large" title="签到类型" :value="qmClass" isLink @click="show1 = true"></u-cell>
			<u-popup :show="show1" :round="10" mode="bottom" @close="close" @open="open">
				<div class="ul">
					<li class="li" @click="pd">拜访签到</li>
					<li class="li" @click="xr">工单签到</li>
					<li class="li" @click="bf">跟进签到</li>
				</div>
				<div class="quxn" @click="show1 = false">取消</div>
			</u-popup>
			<u-cell size="large" title="工单记录" value="工单标题" isLink url="/pages/message/crunch/xrze/xrze"></u-cell>
		</u-cell-group>
		<div class="bottNO">
			<div class="ns" @click="goqmd">
				<p>外勤签到</p>
				<p>12:00:01</p>
			</div>
		</div>
	</view>
</template>

<script>
	import wxMapView from '@/components/wx-map-view.vue'
	export default {
		data() {
			return {
				qmClass:'工单签到',
				show1: false,
				disable: false,
				acti: true,
				show: false,
				title: '深圳木卫二科技有限公司',
				address: '广东省深圳市南山区科技园中区科苑路',
				longitude: '',
				latitude: '',
				imageSrc: '/static/logo.png', //自定义图片
				marker: {
					id: 1,
					height: 50,
					width: 40
					// iconPath: '/static/comm/position.png'
				},
				// mapKey: '42795f9a59358dea58a8bxxx',//高德地图测试key
				mapKey: 'ZNJBZ-E6RHJ-EV3F2-DL73K-ARTTH-3EBRZ', //腾讯地图测试key
				// mapKey: 'p5mGzPEt30bwv1yEkeQGsGP4Xrs9xxxx', //百度地图
				mapType: 'tmap' // tmap bmap amap
			};
		},
		onLoad() {},
		methods: {
			onClick() {
				this.show = true;
			},
			confirm(e) {
				if (e) {
					this.longitude = e.longitude;
					this.latitude = e.latitude;
					this.title = e.title;
					this.address = e.address;
				}
				this.show = false;
			},
			wd() {
				console.log('外勤签到')
				this.acti = true
			},
			qm() {
				console.log("签到列表")
				this.acti = false
				uni.navigateTo({
					url: '/pages/message/crunch/qmlist/qmlist',
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show1 = false
				// console.log('close');
			},
			pd() {
				// console.log('拍照')
				this.qmClass="拜访签到"
				this.show1 = false
			
			},
			xr() {
				// console.log('相册')
				this.qmClass="工单签到"
				this.show1 = false
			
			},
			bf() {
				// console.log('选择')
				this.qmClass="跟进签到"
				this.show1 = false
				
			},
			goqmd(){
				console.log("签到")
				uni.navigateTo({
					url:'/pages/message/crunch/qtrf/qtrf'
				})
			},
		},
		components: {
			wxMapView,
		}
	};
</script>

<style lang="scss" scoped>
	.bottNO{
		width: 100%;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.ns{
			width: 200rpx;
			height: 200rpx;
			background-color: #52c1f5;
			border-radius: 50%;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: white;
			// align-items: center;
		}
	}
	.quxn {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #3478f7;
	}
	
	.conDi {
		width: 100%;
		// height: 100rpx;
		background-color: #ffffff;
		border-bottom: 40rpx solid #f9f9f9;
		font-size: 30rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0px 20rpx;

		.ppp {
			color: #0079fe;
		}
	}

	.tit {
		width: 100%;
		// height: 100rpx;
		display: flex;
		justify-content: center;
		font-size: 30rpx;

		.p1 {
			// margin: 0px 5rpx;
			padding: 10rpx;
			border: 1px solid #0079fe;
			color: #0079fe;
		}

		.active {
			background-color: #0079fe;
			color: #fff;
		}
	}

	.diimg {
		width: 100%;
		// height: 200rpx;
		height: 400rpx;
	}

	#mapContainer {
		width: 100%;
		height: 200px;
	}
	.ul {
		width: 100%;
		// border-radius: 40rpx;
		border-bottom: 40rpx solid #a7a7a7;
	
		// height: 30px;
		// background-color: saddlebrown;
		.li {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f2f2f2;
			text-align: center;
			color: #3478f7;
			line-height: 100rpx;
		}
	}
</style>